<template>
	<nt-popup :show="visible" title="更多操作" :height="height" @close="close" @click="confirm">
		<view class="order-more">
			<view class="order-more__group">
				<view class="order-more__btn" v-for="(it,index) in authList" :key="it.key" @tap="moreHandler(it)"
					v-if="it.visible">
					<view class="order-more__btn--icon">
						<image :src="it.icon"></image>
					</view>
					<view class="order-more__btn--name">{{ it.label }}</view>
				</view>
			</view>
		</view>
		<u-modal :show="modalOptions.show" :title="modalOptions.title" :content='modalOptions.content' showCancelButton
			buttonReverse @confirm="confirmModal" @cancel="modalOptions.show = false"></u-modal>
	</nt-popup>
</template>

<script>
	import {
		applyBringBack,
		serviceCompleted as serviceCompletedApi
	} from "@/api"
	import {
		scatterAuth
	} from "@/utils"
	export default {
		props: {
			id: {
				type: [Number, String],
				default: ""
			},
			// 权限值
			auth: {
				type: Object,
				default: () => {}
			},
			show: {
				type: Boolean,
				default: false
			},
			height: {
				type: String,
				default: "auto"
			},
			is_type: {
				type: String,
				default: ""
			},
			is_submit: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				optionsIndex: -1,
				modalOptions: {
					show: false,
					type: 'back',
					options: {},
					title: "本人带回",
					content: "确定带回次订单？"
				},
				authList: [],
				visible: false
			}
		},
		watch: {
			auth: {
				handler(nv) {
					const pages = getCurrentPages()
					const auths = JSON.parse(JSON.stringify(scatterAuth(nv) || []))
					this.authList = auths.map(item => {
						if (item.key === 16) {
							item.label = this.is_submit === 0 ? "添加详情" : "修改详情"
							if (pages[pages.length - 1].route === "subpackage/order/pages/submit/_id") {
								item.visible = false
							}
						}
						return item;
					})
				},
				deep: true,
				immediate: true
			},
			show: {
				handler(n) {
					this.visible = n
				},
				immediate: true
			}
		},
		created() {},
		methods: {
			close() {
				this.visible = false
				this.$emit("close", false)
			},
			// 本人带回
			selfBringBack(e) {
				applyBringBack(this.id).then(res => {
					const {
						code,
						data,
						msg
					} = res;
					if (code === 1) {
						this.toast(msg)
						this.modalOptions.show = false;
					}
					this.close()
				})
			},
			// 服务完成
			serviceCompleted(){
				serviceCompletedApi(this.id).then(res => {
					const {
						code,
						data,
						msg
					} = res;
					this.toast(msg)
					this.modalOptions.show = false;
					this.close()
					setTimeout(() => this.$emit('refresh'), 1000)
				})
			},
			moreHandler(data) {
				let mode = "order"
				// 本人带回
				if (data.key === 10) {
					this.modalOptions.show = true
					this.modalOptions.title = '本人带回'
					this.modalOptions.content = '确定带回次订单？'
					this.modalOptions.type = 'back'
					return;
				} else if (data.key === 13) { // 发票
					mode = "invoice"
				} else if (data.key === 9) { // 申请修改
					mode = "update"
				} else if (data.key === 18) { // 添加支付
					mode = "payment"
					this.close()
					return this.nav(`/subpackage/order/pages/payment/index?key=${data.key}&id=${this.id}`)
				} else if (data.key === 17) { // 师傅备注
					mode = "master"
				} else if (data.key === 6) { // 申请加班
					mode = "overtime"
				} else if (data.key === 7) { // 申请退款
					mode = "refund"
				} else if (data.key === 8) { // 转单
					mode = "transfer"
				} else if (data.key === 14) { // 设置送返金额
					mode = "setfees"
				} else if (data.key === 16) {
					this.modalOptions.show = false
					this.close()
					return this.nav(`/subpackage/order/pages/submit/_id?id=${this.id}`)
				} else if (data.key === 22) {
					this.close()
					return this.nav(`/subpackage/order/pages/submit/backDetail?id=${this.id}`)
				} else if (data.key === 21) {
					this.close()
					return this.nav(`/subpackage/order/pages/submit/recovery?id=${this.id}`)
				} else if (data.key === 23) {
					this.close()
					return this.nav(`/subpackage/order/pages/acclaim/index?id=${this.id}`)
				} else if (data.key === 24 && this.is_type == '返修') {
					mode = 'selftakeback'
					return this.nav(
						`/subpackage/order/pages/submit/form?key=${data.key}&id=${this.id}&mode=${mode}`)
				} else if (data.key === 25) {
					mode = 'postGG'
				}else if(data.key === 26) {
					mode = 'bindCode'
				}else if(data.key === 27){ // 服务完成
					this.modalOptions.show = true
					this.modalOptions.title = '服务完成'
					this.modalOptions.content = '确定更改为服务完成？'
					this.modalOptions.type = 'server'
					return;
				}
				this.close()
				this.modalOptions.show = false
				this.nav(`/subpackage/order/pages/submit/form?key=${data.key}&id=${this.id}&mode=${mode}`)
				this.$emit("close", false)
			},
			confirm() {},
			confirmModal() {
				if(this.modalOptions.type === 'back') {
					this.selfBringBack()
				}else{
					this.serviceCompleted()
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	/deep/.u-transition {
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		overflow: hidden;
		min-height: 40vh;
	}

	.order-more {
		padding: 20rpx;
		box-sizing: border-box;

		&__group {
			// display: flex;
			// align-items: center;
			// flex-wrap: wrap;
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			grid-column-gap: 3%;
			grid-row-gap: 20rpx;
		}

		&__btn {
			padding: 15rpx 6rpx;
			font-size: 30rpx;
			border-radius: 10rpx;
			box-sizing: border-box;
			color: #666;
			text-align: center;

			&.active {
				background: var(--theme-color);
				border-color: var(--theme-color);
				color: #fff;
			}

			&--icon {
				width: 110rpx;
				height: 110rpx;
				border-radius: 50%;
				background: #F3F8FE;
				margin: 0 auto 20rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			&--name {
				font-size: 26rpx;
				font-weight: bold;
				color: #333;
			}
		}
	}
</style>